<template>
	<view class="content">
		<view class="orderCont">
			<view class="orderContText">
				<text class="orderTetli">订单详情</text>
				<view class="textCont">
					<view class="orderRow">
						<text>订单号</text>
						<text class="textOverflow">{{details.orderCode}}</text>

					</view>
					<view class="orderRow">
						<text>用户名</text>
						<text class="textOverflow">{{details.petName}}</text>

					</view>
					<view class="orderRow">
						<text>设备编号</text>
						<text class="textOverflow">{{details.deviceCode}}</text>

					</view>
					<view class="orderRow">
						<text>设备名</text>
						<text class="textOverflow">{{details.deviceName}}</text>

					</view>
					<view class="orderRow">
						<text>格口</text>
						<text>{{details.gridCode}}</text>

					</view>
					<view class="orderRow">
						<text>订单时间</text>
						<text class="textOverflow">{{details.create_time}}</text>

					</view>
					<view class="orderRow">
						<text>购买商品</text>
						<text class="textOverflow">{{details.goodsName}}</text>

					</view>
					<view class="orderRow">
						<text>支付金额</text>
						<text >{{details.payAmount}}</text>

					</view>
					<view class="orderRow">
						<text>订单状态</text>
						<text>{{details.stateName}}</text>

					</view>


				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btnLeft" v-if="details.state == 11">
				退款
			</view>
			<view class="btnRight">
				开柜
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				details: {}
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.getData(this.orderId)
		},
		methods: {
			getData() {
				this.http({
					url: "/Main/selfPurchase",
					data: {
						orderId: this.orderId

					},
					method: "POST",
					success: res => {
						if (res.code == 200) {
							this.details = res.data
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
		background: #FAFAF9;
		padding: 55rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderTetli {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 80rpx;
		color: #000000;
	}

	.orderRow {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.textOverflow {
		width: 350rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	.btnBox {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.btnLeft {
		width: 300rpx;
		height: 76rpx;
		background: #E32929;
		opacity: 1;
		border-radius: 4rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}

	.btnRight {
		color: #FFFFFF;
		width: 300rpx;
		height: 76rpx;
		background: #015BAA;
		;
		opacity: 1;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
</style>
